【精选】React事件处理的方式/绑定this的5种方式/事件回调函数传递参数

2023-11-12 16:57| 来源: 网络整理| 查看: 265

在这里插入图片描述

一、在React元素绑定事件要注意的三点 1、React中事件的命名采用驼峰命名法，而不是原生dom中的小写。

如：onclick要写成onClick,onchange要写成onChange

2、使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是以dom字符串的形式

在dom中：不服点我 React中: 不服点我 //clickButton是一个函数

3、e.preventDefault来阻止事件的默认行为在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写： Click me react中：function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( handleClick() { console.log('this > ', this); // this 指向App组件本身 }, render() { return ( handleClick() { console.log('this > ', this); } render() { return ( handleClick() { console.log('this > ', this); } render() { return ( constructor(props) { super(props); // 构造函数中预先绑定 this.handleClick = this.handleClick.bind(this); } handleClick() { console.log('this > ', this); } render() { return ( constructor(props) { super(props); } handleClick = () => { console.log('this > ', this); } render() { return ( (e) => this.deleteRow(id, e)}>Delete Row //传递多个参数 this.handleClick(ev,arg1,arg2,...)}}

第二类：在构造函数中绑定或定义阶段使用箭头函数绑定，render中通过this引用

react如果直接在点击事件里传参，则不会在触发点击时进行触发，而是在渲染时直接调用。在这里插入图片描述

测试后发现，该事件会在初始化时直接触发，而不是点击时触发。解决该问题方案为：箭头函数+间接调用在这里插入图片描述

总结：事件处理函数需要传递参数时，可以在render函数中通过使用bind或者箭头函数传递参数。

欢迎点赞～～～谢谢🙏

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章